import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Button } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import ListTable from "./Components/ListTable";
import PointAdd from "./Components/PointAdd";
import MaintainChange from "./Components/MaintainChange";




@connect(({ point, global }) => ({
  dictionaries:global.dictionaries
}))

export default class EquipmentList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      modalAddVisible: false,
      modalDistrictVisible: false,
      modalPointids:null,
      detailId: 0,
      detailInfoId: 0,
      detailInfoName:null,
      isReloadList:false,
    };
  }

  componentWillUnmount(){
    const { dispatch } = this.props;
    dispatch({
      type: `point/appendClearState`,
    })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    // 数据字典
    // dispatch({
    //   type: 'global/fetch_dictionar',
    //   // payload:["devType", "status", "whitelistReason"]
    // });
    // 维保单位列表
    // dispatch({
    //   type: 'global/fetch_select_maintencompany',
    // });
  }

  // 暂停数据回拉
  sotpReloadList = () =>{
    this.setState({
      isReloadList:false,
    });
  }

  // 显示新增修改model
  handlePointModalVisible= flag => {
    this.setState({
      modalAddVisible: !!flag,
    });
  };

  // 设备新增、编辑后model回调
  handlePointModelCallBack=()=>{
    this.handlePointModalVisible(false);
    this.setState({
      isReloadList:true,
    });
  }

  // 编辑设备
  handleEditPoint = id => {
    this.setState(
      {detailId: id},
      () => {
        this.handlePointModalVisible(true);
      }
    );
  };

  // 展示详情
  handlePointInfo= (id,name) => {
    this.setState(
      {
        detailInfoId: id,
        detailInfoName:name
      }
    );
  };

  // 移动区域
  handleDistrict = (ids) => {
    this.setState({
      modalPointids: ids,
    },()=>{
      this.handleDistrictModalVisible(true);
    });
  };

  // 显示移动区域modol
  handleDistrictModalVisible = flag => {
    this.setState({
      modalDistrictVisible: !!flag,
    });
  };

  // 区域移动加入后回调
  handleDistrictModelCallBack=(value)=>{
    this.handleDistrictModalVisible(false);
    const { dispatch } = this.props;
    const { modalPointids } = this.state;

    if(value && modalPointids && modalPointids.length>0){
      dispatch({
        type: 'point/action_point_change',
        payload: {
          pointIds:modalPointids,
          ...value,
        },
      }).then(()=>{
        this.setState({
          selectedRows: [],
          isReloadList:true,
        });
        // this.getDataList(formValues,pageSize,currentPage);
      });
    }

  }


  render() {
    const { dictionaries, location } = this.props;
    const { modalAddVisible, modalDistrictVisible, detailId, isReloadList } = this.state;
    const pagesquery = location.query;


    return (
        <PageHeaderLayout >
          <ListTable
            dictionaries={dictionaries}
            addModelCallBack={this.handleEditPoint}
            detailModelCallBack={this.handlePointInfo}
            districtModelCallBack={this.handleDistrict}
            sotpReloadList={this.sotpReloadList}
            isReloadList={isReloadList}
            pagesquery={pagesquery}
          />

          <PointAdd
            visible={modalAddVisible}
            onCancel={e => this.handlePointModalVisible(e)}
            callback={this.handlePointModelCallBack}
            detailId={detailId}
            dictionaries={dictionaries}
          />

          <MaintainChange
            visible={modalDistrictVisible}
            onCancel={e => this.handleDistrictModalVisible(e)}
            callback={this.handleDistrictModelCallBack}
          />

        </PageHeaderLayout>

    );
  }
}
